<template>
  <div class="report-container">
    <h2>销售统计报表</h2>
    <el-divider />

    <!-- 图表类型选择 -->
    <div class="chart-type-selector">
      <el-radio-group v-model="selectedChartType" @change="updateChart">
        <el-radio label="sales-trend">销售趋势</el-radio>
        <el-radio label="popular-dishes">热门菜品</el-radio>
        <el-radio label="sales-percentage">菜品销售占比</el-radio>
      </el-radio-group>
    </div>

    <!-- 图表展示区域 -->
    <div class="chart-box">
      <h3>{{ getChartTitle(selectedChartType) }}</h3>
      <div id="chart" style="height: 300px;"></div>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue';
import * as echarts from 'echarts';

// 初始化图表类型选择
const selectedChartType = ref('sales-trend');

// 模拟数据
const salesTrendData = {
  xAxis: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'],
  yAxis: [120, 200, 150, 80, 70, 110, 130]
};

const popularDishesData = [
  { name: '牛排', value: 80 },
  { name: '披萨', value: 60 },
  { name: '蔬菜沙拉', value: 40 },
  { name: '奶油蘑菇汤', value: 30 },
  { name: '意大利面', value: 50 }
];

const salesPercentageData = [
  { value: 30, name: '主菜' },
  { value: 20, name: '主食' },
  { value: 15, name: '汤品' },
  { value: 10, name: '沙拉' },
  { value: 25, name: '甜品' }
];

const chart = ref(null);

onMounted(() => {
  chart.value = echarts.init(document.getElementById('chart'));
  updateChart();
});

const updateChart = () => {
  let option;
  switch (selectedChartType.value) {
    case 'sales-trend':
      option = {
        xAxis: {
          type: 'category',
          data: salesTrendData.xAxis
        },
        yAxis: {
          type: 'value'
        },
        series: [{
          data: salesTrendData.yAxis,
          type: 'line'
        }]
      };
      break;
    case 'popular-dishes':
      option = {
        xAxis: {
          type: 'category',
          data: popularDishesData.map(item => item.name)
        },
        yAxis: {
          type: 'value'
        },
        series: [{
          data: popularDishesData.map(item => item.value),
          type: 'bar'
        }]
      };
      break;
    case 'sales-percentage':
      option = {
        series: [{
          type: 'pie',
          radius: '50%',
          data: salesPercentageData
        }]
      };
      break;
  }
  chart.value.setOption(option);
};

const getChartTitle = (type) => {
  switch (type) {
    case 'sales-trend':
      return '销售趋势';
    case 'popular-dishes':
      return '热门菜品';
    case 'sales-percentage':
      return '菜品销售占比';
    default:
      return '';
  }
};
</script>

<style scoped>
.report-container {
  padding: 20px;
}

h2 {
  text-align: center;
  margin-bottom: 10px;
}

.chart-type-selector {
  margin-bottom: 20px;
  display: flex;
  justify-content: center;
}

.chart-box {
  flex: 1;
  min-width: 300px;
  border: 1px solid #ebeef5;
  border-radius: 4px;
  padding: 20px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}

.chart-box h3 {
  margin-top: 0;
  margin-bottom: 20px;
  text-align: center;
  color: #606266;
}
</style>